	<template>
		<view class="container">
			<view class="status">
				<Card>
					<view class="flex flex-col items-center">
						<image src="@/static/order/icon_status_cancelled.png" />
						<text class="state">已取消</text>
						<view class="hint">您已取消此次预约，如您需要继续前往点击“预约”重新发起预约。</view>
					</view>
				</Card>
			</view>

			<view class="order">
				<Card>
					<view class="head flex justify-between items-center">
						<text class="text-primary">德记楼·老北京烤鸭(领袖天地店)</text>
						<image src="@/static/order/icon_arrow_right_primary.png" />
					</view>
					<view class="divider" />
					<view class="row">
						<text>项目名称：</text>
						<text>家庭聚餐3-4人</text>
					</view>
					<view class="row">
						<text>到店时间：</text>
						<text>9-22 12:00-13:00</text>
					</view>
					<view class="row">
						<text>到店人数：</text>
						<text>4人</text>
					</view>
					<view class="row">
						<text>预约人：</text>
						<text>李四 18859595959</text>
					</view>
					<view class="row">
						<text>实付金额：</text>
						<text class="text-accent">¥399.00</text>
					</view>
				</Card>
			</view>
		</view>
	</template>

	<script setup>
		import Card from '@/components/Card/index.vue'
	</script>

	<style lang="scss">
		.container {
			min-height: 100vh;
			padding: 32rpx 28rpx 140rpx;
			background: $body-bc;
			color: $content-color;
			font-size: 26rpx;

			.status {
				::v-deep .card {
					padding-top: 75rpx;
					padding-bottom: 64rpx;
				}

				image {
					width: 149rpx;
					height: 142rpx;
					margin-bottom: 60rpx;
				}

				.state {
					margin-bottom: 28rpx;
					color: $title-color;
					font-size: 36rpx;
				}

				.hint {
					width: 456rpx;
					font-size: 24rpx;
					line-height: 37rpx;
					text-align: center;
				}
			}

			.order {
				margin: 22rpx 0 30rpx;

				::v-deep .card {
					padding: 36rpx 30rpx;
				}

				.head {
					text {
						font-size: 30rpx;
					}

					image {
						width: 11rpx;
						height: 21rpx;
					}
				}

				.divider {
					height: 1rpx;
					margin: 30rpx 0 32rpx;
					background-color: $border-color;
				}

				.row+.row {
					margin-top: 18rpx;
				}
			}

		}
	</style>